<template>
  <div class="hrader">
		<h2>盛大汽车礼品卡兑换中心</h2>
    <div class="tablist">
      <nav class="linkNav">
        <van-tabs v-model="status" @change="changeTab">
          <van-tab v-for="(item, index) in tabList" :key="index" :title="item.name">
            <router-view/>
          </van-tab>
        </van-tabs>
      </nav>
    </div>
  </div>
</template>
<script>
  import vFirst from '../../../components/record/record'
  import vSecond from '../../../components/rightsInterests/rightsInterests'
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        routerLink: '',
        urlList: [
          {url: '/index/content/rightsInterests', name: '权益中心', class:"linkLi"},
          {url: '/index/content/record', name: '兑换记录',},
        ],
        tabList: [{ name: '全部', id: 1}, {name: '收益', id: 2}, {name: '兑换', id: 3}, {name: '失效', id: 4}],
        currentPage: 5,
        value6: '', //投保时间，
        active: '',
        bottom: false
      }
    },
    computed: {
      status: {
        get () {
          return parseFloat(this.$store.state.status.status, 10);
        },
        set (value) {
          this.$store.commit('exchangeStatus', value)
        }
      }
    },
    created(i) {
      this.routerLink = window.sessionStorage.getItem('tabName');
      if (i === undefined) {
        return;
      }
      if (i != null) {
        window.location.reload();
        this.created(null);
      }
    },
    methods: {
      changeTab(index, title) {
        sessionStorage.setItem('status', index);
        this.$store.commit('exchangeStatus', index);
      },
      linkOrder(i) {
        this.routerLink = i;
        window.sessionStorage.setItem('tabName', i);
      }
    },
    components: {
      vFirst,
      vSecond
    }
  }
</script>
<style lang="less">
	.hrader{
    background: #FFFFFF;position:fixed;width:100%;height: 100%;overflow: auto;-webkit-overflow-scrolling: touch;
		h2{
			height:45px;line-height:45px;text-align:center;font-size:16px;color:#333;background: #fff;
    }
    .van-tabs__line{
      background-color: #FF8A41 !important;
    }
    .van-tab--active{
      color: #FF8A41 !important;
    }
		.linkUl{
				text-align:center;
				a{
					width:100px;display:inline-block;height:32px;line-height:32px; border:1px solid #EDEDED;color:#888888;
				}
        a:nth-of-type(1){border-radius:4px 0px 0px 4px;}
        a:nth-of-type(2){border-radius: 0px 4px 4px 0px;}
				a.on {
					color:#49B7E0;border:1px solid #49B7E0;
				}
		}
	}
	.tablist {padding: 0;}
	.linkNav {background: #fff;padding: 10px 0 20px 0;}

</style>
